<template>
  <div class="content">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="账号">
        <el-input v-model="formInline.account" placeholder="请输入账号" clearable />
      </el-form-item>
      <el-form-item label="用户名称">
        <el-input v-model="formInline.userName" placeholder="请输入用户名称" clearable />
      </el-form-item>
      <!-- <el-form-item label="Activity time">
        <el-date-picker v-model="formInline.date" type="date" placeholder="Pick a date" clearable />
      </el-form-item> -->
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button type="primary" @click="dialogVisible=true" plain>新增</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableParmas.rows">
      <el-table-column prop="account" label="账号"></el-table-column>
      <el-table-column prop="userName" label="用户名称"></el-table-column>
      <el-table-column label="角色"></el-table-column>
      <el-table-column prop="sort" label="排序"></el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>
      <el-table-column label="创建时间" align="center" width="160" prop="createTime">
        <template #default="scope">
          <span>{{ proxy.$utils.dateTimeFormateFn(scope.row._add_time,"all") }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="150" fixed="right">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="handleClick(scope.row,1)">修改</el-button>
          <el-button link type="primary" icon="Delete" @click="handleClick(scope.row,2)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <Pagination v-if="tableParmas['total']" :total="tableParmas['total']" v-model:page="formInline.pageIndex" v-model:limit="formInline.pageSize" @pagination="getInfo" />

    <el-dialog v-model="dialogVisible" title="新增/编辑账号" width="600" :before-close="handleClose">
      <el-form :model="form" label-width="90" ref="menuRef">
        <el-form-item label="用户名称">
          <el-input v-model="form.userName" placeholder="请输入用户名称" clearable />
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="form.account" placeholder="请输入账号" clearable />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" placeholder="请输入密码" clearable />
        </el-form-item>
        <el-form-item label="角色">
          <roleSelect v-model="form.roles" multiple="1"></roleSelect>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="form.sort" :min="0" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remark" placeholder="请输入备注" type="textarea" :autosize="{ minRows : 4 }" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="submitForm" :loading="loading">
            确 认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";

const { proxy } = getCurrentInstance();
let formInline = ref({
  account: "",
  userName: "",
  pageIndex: 1,
  pageSize: 100,
});
let form = ref({
  _id: "",
  account: "",
  password: "",
  userName: "",
  sort: 0,
  roles: [],
  remark: "",
});
let tableParmas = ref({});
let dialogVisible = ref(false);
let loading = ref(false);

onMounted(() => {
  search();
});

let search = () => {
  formInline.value.pageIndex = 1;
  getInfo();
};
let getInfo = async () => {
  tableParmas.value = await proxy.$apis.account({
    type: "list",
    data: formInline.value,
  });
};
let handleClick = async (row, num) => {
  switch (num) {
    case 1:
      form.value = proxy.$utils.formatFunction(row, { ...form.value });
      dialogVisible.value = true;
      break;
    case 2:
      let resp = await proxy.$utils.confirmTips(
        `确认删除【${row.userName}】吗？`
      );
      if (!resp) return;
      await proxy.$apis.account({
        type: "delete",
        data: { _id: row._id },
      });
      proxy.$utils.showToast("删除成功");
      getInfo();
      break;
    default:
      break;
  }
};
let handleClose = () => {
  form.value = {
    _id: "",
    account: "",
    userName: "",
    sort: 0,
    roles: [],
    remark: "",
    password: "",
  };
  getInfo();
  dialogVisible.value = false;
};
let submitForm = () => {
  proxy.$refs["menuRef"].validate((valid) => {
    if (valid) {
      save();
    }
  });
};
let save = async () => {
  try {
    loading.value = true;
    let query = {
      type: "add",
      data: form.value,
    };
    if (form.value._id) query["type"] = "update";
    await proxy.$apis.account(query);
    proxy.$utils.showToast("操作成功");
    handleClose();
  } catch (error) {
  } finally {
    loading.value = false;
  }
};
</script>

<style lang="scss" scoped>
.content {
  margin: 20px;
  .el-form {
    max-height: 65vh;
    overflow-y: auto;
  }
}
</style>
